<template>
  <div class="user-statistics">
    <div class="page-header">
      <h1>用户统计</h1>
      <p>深入了解您的用户群体特征</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-grid">
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in statsData" :key="stat.key">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" :class="stat.iconClass">
              <el-icon :size="24"><component :is="stat.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stat.value }}</h3>
              <p>{{ stat.label }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表 -->
    <el-row :gutter="24" class="charts-grid">
      <el-col :xs="24" :lg="16">
        <el-card class="chart-card" shadow="never">
          <div class="card-header">
            <h4>用户增长趋势</h4>
            <el-radio-group v-model="trendInterval" size="small">
              <el-radio-button label="daily">日</el-radio-button>
              <el-radio-button label="monthly">月</el-radio-button>
            </el-radio-group>
          </div>
          <v-chart class="chart" :option="trendOption" autoresize />
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card class="chart-card" shadow="never">
           <div class="card-header">
            <h4>用户活跃度</h4>
          </div>
          <v-chart class="chart" :option="activityOption" autoresize />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, provide, watch } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart, BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { User, Pointer, MagicStick, SwitchButton } from '@element-plus/icons-vue';

use([CanvasRenderer, PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent]);
provide(THEME_KEY, 'light');

const trendInterval = ref('daily');

const statsData = reactive([
  { key: 'total', label: '总用户数', value: '1,289,342', icon: User, iconClass: 'total-icon' },
  { key: 'new', label: '今日新增', value: '2,345', icon: MagicStick, iconClass: 'new-icon' },
  { key: 'active', label: '今日活跃', value: '189,432', icon: Pointer, iconClass: 'active-icon' },
  { key: 'auth', label: '已实名认证', value: '894,321', icon: SwitchButton, iconClass: 'auth-icon' },
]);

const dailyTrendData = {
    xAxis: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
    series: Array.from({ length: 30 }, () => Math.floor(Math.random() * 2000) + 500)
};
const monthlyTrendData = {
    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    series: Array.from({ length: 12 }, () => Math.floor(Math.random() * 50000) + 10000)
};

const trendOption = reactive({
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: dailyTrendData.xAxis },
  yAxis: { type: 'value' },
  series: [{ data: dailyTrendData.series, type: 'bar' }],
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
});

watch(trendInterval, (newVal) => {
    if (newVal === 'daily') {
        trendOption.xAxis.data = dailyTrendData.xAxis;
        trendOption.series[0].data = dailyTrendData.series;
    } else {
        trendOption.xAxis.data = monthlyTrendData.xAxis;
        trendOption.series[0].data = monthlyTrendData.series;
    }
});

const activityOption = reactive({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [{
    name: '活跃度',
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      { value: 189432, name: '今日活跃' },
      { value: 450321, name: '7日活跃' },
      { value: 893210, name: '30日活跃' },
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
});

</script>

<style scoped>
.user-statistics { max-width: 1200px; margin: 0 auto; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { color: #666; }
.stats-grid, .charts-grid { margin-bottom: 24px; }
.stat-card { border-radius: 12px; }
.stat-content { display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }
.total-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
.new-icon { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.active-icon { background: linear-gradient(135deg, #f093fb, #f5576c); }
.auth-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.stat-info h3 { font-size: 24px; margin: 0; }
.stat-info p { margin: 0; color: #666; }
.chart-card { border-radius: 12px; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header h4 { margin: 0; font-size: 16px; }
.chart { height: 350px; }
</style> 